<template>
    <div>
        <el-card style="margin-top: 10px;">
            <el-tabs v-model="activeName">
                <el-tab-pane label="销售额" name="sale"></el-tab-pane>
                <el-tab-pane label="访问量" name="visite"></el-tab-pane>
            </el-tabs>
            <div>
                <!-- 右侧日期 -->
                <div class="date">
                    <span @click="setDay">今日</span>
                    <span @click="setWeek">本周</span>
                    <span @click="setMonth">本月</span>
                    <span @click="setYear">今年</span>
                </div>
                <div class="block">
                    <el-date-picker v-model="date" type="daterange" range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>

            <!-- 内容区 -->
            <div>
                <el-row :gutter="20">
                    <!-- 柱状图 -->
                    <el-col :span="18">
                        <div ref="cherts" class="cherts"></div>
                    </el-col>
                    <el-col :span="6" class="ranking">
                        <h3>门店{{title}}排名</h3>
                        <ul>
                            <li>
                                <span class="rindex">1</span>
                                <span>空调</span>
                                <span class="rvalue">98233</span>
                            </li>
                            <li>
                                <span class="rindex">2</span>
                                <span>平板</span>
                                <span class="rvalue">88290</span>
                            </li>
                            <li>
                                <span class="rindex">3</span>
                                <span>手机</span>
                                <span class="rvalue">87665</span>
                            </li>
                            <li>
                                <span class="rindex">4</span>
                                <span>家具</span>
                                <span class="rvalue">67223</span>
                            </li>
                            <li>
                                <span class="rindex">5</span>
                                <span>家电</span>
                                <span class="rvalue">56545</span>
                            </li>
                            <li>
                                <span class="rindex">6</span>
                                <span>清洁</span>
                                <span class="rvalue">55589</span>
                            </li>
                            <li>
                                <span class="rindex">7</span>
                                <span>音响</span>
                                <span class="rvalue">43786</span>
                            </li>
                        </ul>
                    </el-col>

                </el-row>

            </div>
        </el-card>
    </div>
</template>

<script>
import * as echarts from 'echarts'
// 日期插件
import dayjs from 'dayjs'
import { mapState } from 'vuex';
export default {
    name: 'Sale',
    data() {
        return {
            activeName: 'sale',
            myEcharts:null,
            date:[]//收集日期
        };
    },
    methods: {
        // 今日
        setDay(){
            const day=dayjs().format('YYYY-MM-DD')
            this.date=[day,day]
        },
        // 本周
        setWeek(){
            const start=dayjs().day(1).format('YYYY-MM-DD')
            const end=dayjs().day(7).format('YYYY-MM-DD')
            this.date=[start,end]
        },
        // 本月
        setMonth(){
            const start = dayjs().startOf("month").format("YYYY-MM-DD");
            const end = dayjs().endOf("month").format("YYYY-MM-DD");
            this.date = [start, end];
        },
        // 今年
        setYear(){
            const start = dayjs().startOf("year").format("YYYY-MM-DD");
            const end = dayjs().endOf("year").format("YYYY-MM-DD");
            this.date = [start, end];
        }
    },
    mounted() {
        // 初始化echarts实例
        this.myEcharts = echarts.init(this.$refs.cherts)
        // 配置数据
        this.myEcharts.setOption({
            title: {
                text: this.title+'趋势'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: [],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    data: []
                }
            ]
        })
    },
    computed:{//计算属性
        // 门店标题：显示销售额/f=访问量
        title(){
            return this.activeName=='sale'?'销售额':'访问量'
        },
        ...mapState('home',['list'])
    },
    watch:{//监听属性
        title(){//被监听的属性
            // 改变图表的标题
            this.myEcharts.setOption({
                title:{
                    text:this.title
                },
                xAxis:{
                    data:this.title == "销售额"
                        ? this.list.orderFullYearAxis
                        : this.list.userFullYearAxis,
                },
                series:[
                    {
                       name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: this.title == "销售额"
                        ? this.list.orderFullYear
                        : this.list.userFullYear,
                    }
                ]
            })
        },
        // 监视仓库中的数据
        list(){
            this.myEcharts.setOption({
            title: {
                text: this.title+'趋势'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: this.list.orderFullYearAxis,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    data: this.list.orderFullYear,
                }
            ]
        })
        }
    }
}
</script>

<style scoped>
/* >>>深度选择器 */
>>>.el-card__body {
    position: relative;
    /* border-bottom: 1px solid #eee; */
}

.date {
    top: 0px;
    height: 40px;
    line-height: 40px;
    margin: 15px 20px 0px 20px;
    position: absolute;
    right: 250px;
}

.date span {
    margin-right: 8px;
    cursor: pointer;
}

>>>.el-date-editor {
    position: relative;
    float: right;
    width: 250px !important;
    top: -64px;
}

.cherts {
    width: 100%;
    height: 300px;
}

>>>.el-tabs {
    margin-bottom: 10px;
}

.ranking {
    position: absolute;
    right: 0;
}

ul {
    list-style: none;
    width: 100%;
    height: 300px;
    padding: 0px;
}

ul li {
    height: 8%;
    margin: 10px 0px;
}

.rindex {
    float: left;
    width: 20px;
    line-height: 19px;
    border-radius: 50%;
    background: rgb(84 112 198);
    color: white;
    text-align: center;
    margin-right: 80px;
}

.rvalue {
    margin-left: 80px;
}
</style>